
import React, { Component } from 'react';
import {Button,Table,Modal,Form,Input,Cascader,InputNumber,Image} from "antd"
import {UserOutlined,LockOutlined,PhoneOutlined,UploadOutlined,MoneyCollectOutlined,PayCircleOutlined} from "@ant-design/icons"
import { peijian, Rumoney } from '../../utils';
import "./index.scss"
import { ajax } from '../../api';
import { baseURL } from '../../api/http';
import moment from "moment"


const layout = {
    labelCol: { offset:6,span: 12 },
    wrapperCol: { offset:6 , span: 12 },
};
const {Search} = Input

class PeiList extends Component {

    state={
        columns:[
            {
                title:"序号",
                dataIndex:"index",
                key:"index",
                align:"center",
                render:(text,item,index)=>{
                    return index+1
                }
            },
            {
                title:"配件类型",
                align:"center",
                render:(text,item,index)=>{
                    var a=item.peijian.split("=")
                    return (a[0])
                     
                }
            },
            {
                title:"配件细分",
                align:"center",
                render:(text,item,index)=>{
                    var a=item.peijian.split("=")
                    return (a[1])
                     
                }
            },
            {
                title:"操作人员",
                align:"center",
                key:"username",
                dataIndex:"username",
            },
            {
                title:"入库时间",
                align:"center",
                render:(text)=>{
                    return moment(text.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            {
                title:"入库数量",
                align:"center",
                render:(text,item)=>{
                    return (item.content)
                }
            },
            {
                title:"进价",
                align:"center",
                render:(text,item)=>{
                    return (`${item.money}元`)
                }
            },
            {
                title:"总价",
                align:"center",
                render:(text,item)=>{
                    return (`${item.dbmoney}元`)
                }
            },
            {
                title:"入库单",
                align:"center",
                render:(text,item)=>{
                    return (<Image width={50}  src={item.img.replace(/public/,baseURL)}/>)
                }
            },
        ],
        addvisible:false,
        imgUrl:null,
        peijianList:[]
    }

    showAddModal=()=>{
        this.setState({
            addvisible:true
        })
    }

    addCancel=()=>{
        this.setState({
            addvisible:false
        })
        this.addform.resetFields()
    }

    startUpload=()=>{
        this.file.click()
    }

    uploadFile=()=>{
        var file = this.file.files[0];
        var data = new FormData();
        data.append("file",file)
        ajax.uploadanyimg(data).then(res=>{
            if(res.code==200){
                this.setState({
                    imgUrl:res.path
                })
                this.addform.setFieldsValue({
                    img:res.path
                })
            }
        })

    }

    addSubmit=()=>{
        this.addform.validateFields().then(value=>{
            console.log(value)
            ajax.addpeijian(value).then(res=>{
                if(res.code==200){
                    this.setState({
                        addvisible:false,
                        imgUrl:null
                    })
                    this.addform.resetFields()
                    this.getlist()
                }
            })
        })
    }

    componentDidMount(){
      this.getlist()
    }

    getlist=(key)=>{
        var obj={}
        if(key){
            obj.keyword=key
        }
        ajax.peijianlist(obj).then(res=>{
            if(res.code==200){
                this.setState({
                    peijianList:res.result
                })
            }
        })
    }

    onSearch=()=>{
        var keyword=this.SearchInp.state.value
        this.getlist(keyword)
    }

    onChange=(value)=>{
        value.forEach((item,i)=>{
            Rumoney.forEach((value,index)=>{
                if(item==value.value){
                    if(this.shuliang.state.value){

                    }
                    this.addform.setFieldsValue({
                        money:value.money,
                        dbmoney:this.shuliang.state.value*value.money,
                    })
                }
            })
        })
    }

    numberchange=(value)=>{
        this.addform.setFieldsValue({
            dbmoney:value*this.dmoney.state.value
        })
    }

    render() {
        return (
            <div>
                <h2 style={{textAlign:"center",color:"#f00",fontSize:30,fontWeight:600}}>入库详细</h2>
                <div style={{display:"flex",justifyContent:"space-between"}}>
                <Button type="danger" onClick={this.showAddModal}>配件入库</Button>
                <Search placeholder="搜索入库配件" enterButton="搜索" style={{width:350}} ref={el=>this.SearchInp=el}   onSearch={this.onSearch}/>
                </div>
                
                <Table columns={this.state.columns} dataSource={this.state.peijianList} style={{marginTop:15}} bordered pagination={{pageSize:10}} rowKey={
                        (item)=>(item._id)
                    }/>

                    <Modal
                    title="配件入库"
                    visible={this.state.addvisible}
                    onCancel={this.addCancel}
                    onOk={this.addSubmit}
                    cancelText="取消"
                    okText="入库"
                     >
                    <Form
                        name="addForm"
                        ref={el=>this.addform=el}
                        layout="vertical"
                        className="form-box"
                        {...layout}
                        initialValues={{ 
                            content:1
                        }}
                    >
                        <Form.Item
                            label="配件栏"
                            name="peijian"
                            rules={[{ required: true, message: '请选择配件' },
                           ]}
                        >
                            <Cascader  placeholder="请选择添加的配件" options={peijian} onChange={this.onChange} ></Cascader> 
                        </Form.Item>

                        <Form.Item
                            label="单价"
                            name="money"
                        >
                            <Input type="text" disabled style={{width:"100%"}} ref={el=>this.dmoney=el} prefix={<MoneyCollectOutlined  className="login-icon-color"  />} />
                        </Form.Item>

                        <Form.Item
                            label="添加数量"
                            name="content"
                            rules={[
                                { required: true, message: '请输入数量' },
                                {
                                    pattern:/^[1-9]*[1-9][0-9]*$/,message:"请输入正确的数量"
                                }
                              
                            ]}
                        >
                            <InputNumber style={{width:"100%"}} onChange={this.numberchange} ref={el=>this.shuliang=el} prefix={<LockOutlined  className="login-icon-color"  />} />
                        </Form.Item>
                        <Form.Item
                            label="总价"
                            name="dbmoney"
                        >
                            <Input type="text" disabled style={{width:"100%"}}  prefix={<PayCircleOutlined   className="login-icon-color"  />} />
                        </Form.Item>
                        <Form.Item
                            label="入库验收单"
                            name="img"
                            rules={[
                                { required: true, message: '请上传' },
                            ]}
                        >
                            <input type="file" onChange={this.uploadFile} style={{display:"none"}} ref={el=>this.file=el} />
                            <Button icon={<UploadOutlined />} style={{marginBottom:10}} onClick={this.startUpload} >点击上传</Button>
                            {this.state.imgUrl&&<Image width={200}  src={this.state.imgUrl.replace(/public/,baseURL)}/>}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default PeiList;